<template>
	<view class="mainbgc">
		<header-top :messageInfo="{typeFlag:true,message:'我的钱包'}"></header-top>
		<!-- 第一个图表 -->
		<view class="mainpadding">
			<view class="chart1 ffffff radius">
				<!-- 表格顶部 -->
				<view class="chart1_top flexbetween">
					<view class="charttitle margin_rightten">团队收入</view>
					<view class="flexcenter">
						<view class="charttitle">我的排名:</view>
						<view class="charttitle">{{dataAll.mypaiming}}</view>
						<view class="upordown" v-if="dataAll.tuandui_paiming<0">
							<image src="../../static/imags/home/down.png" mode=""></image>
						</view>
						<view class="upordown" v-if="dataAll.tuandui_paiming>=0">
							<image src="../../static/imags/home/up.png" mode=""></image>
						</view>
						<view class="charttitle">{{dataAll.tuandui_paiming}}名</view>
					</view>
				</view>
				<view class="flexright" style="margin-top: 10rpx;">
					<view class="colorbox1 margin_rightfive"></view>
					<view class="charttuli margin_rightten">昨日</view>
					<view class="colorbox2 margin_rightfive"></view>
					<view class="charttuli margin_rightten">今日</view>
				</view>
				<!-- 表格 -->
				<view class="charts-box">
					<qiun-data-charts type="column" :opts="opts" :chartData="chartData" />
				</view>
				<!-- 表格底部 -->
				<view class="chart1_bottom flexbetween">
					<view class="itembox flexcolumn">
						<view>团队总收入</view>
						<view class="itembox_bottom ">
							<text class="bigtext">{{dataAll.team_all}}</text>
							<text>元</text>
						</view>
					</view>
					<view class="itembox flexcolumn">
						<view>团队年收入</view>
						<view class="itembox_bottom ">
							<text class="bigtext">{{dataAll.team_year}}</text>
							<text>元</text>
						</view>
					</view>
					<view class="itembox flexcolumn">
						<view>团队月收入</view>
						<view class="itembox_bottom ">
							<text class="bigtext">{{dataAll.team_month}}</text>
							<text>元</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 第二个图表 -->
		<view class="mainpadding2">
			<view class="chart1 ffffff radius">
				<!-- 表格顶部 -->
				<view class="chart1_top flexbetween">
					<view class="charttitle margin_rightten">总年收入</view>
					<view class="flexcenter">
						<view class="charttitle">我的排名:</view>
						<view class="charttitle">{{dataAll.mypaiming}}</view>
						<view class="upordown" v-if="dataAll.year_paiming<0">
							<image src="../../static/imags/home/down.png" mode=""></image>
						</view>
						<view class="upordown" v-if="dataAll.year_paiming>=0">
							<image src="../../static/imags/home/up.png" mode=""></image>
						</view>
						<view class="charttitle">{{dataAll.year_paiming}}名</view>
					</view>
				</view>
				<view class="flexright" style="margin-top: 10rpx;">
					<view class="colorbox1 margin_rightfive"></view>
					<view class="charttuli margin_rightten">去年</view>
					<view class="colorbox2 margin_rightfive"></view>
					<view class="charttuli margin_rightten">今年</view>
				</view>
				<!-- 表格 -->
				<view class="charts-box">
					<qiun-data-charts type="column" :opts="opts" :chartData="chartDatatwo" />
				</view>
				<!-- 表格底部 -->
				<view class="chart1_bottom flexbetween">
					<view class="itembox flexcolumn">
						<view>个人总收入</view>
						<view class="itembox_bottom ">
							<text class="bigtext">{{dataAll.user_all}}</text>
							<text>元</text>
						</view>
					</view>
					<view class="itembox flexcolumn">
						<view>年收入</view>
						<view class="itembox_bottom ">
							<text class="bigtext">{{dataAll.user_year}}</text>
							<text>元</text>
						</view>
					</view>
					<view class="itembox flexcolumn">
						<view>月收入</view>
						<view class="itembox_bottom ">
							<text class="bigtext">{{dataAll.user_month}}</text>
							<text>元</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="mainpadding2">
			<view class="flexbetween">
				<!-- 选择时间 -->
				<view class="selecttime flexcenter radius" @click="timeshow = true">
					<text>{{timevalue}}</text>
					<view class="timeicon"></view>
				</view>
				<view class="screen_target flexcenter radius ffffff" @click="showlx=true">
					<view>{{lx.name==""?"类型":lx.name}}</view>
					<view class="selecticon"></view>
				</view>
				<view class="screen_target flexcenter radius ffffff">
					<view class="upordown" v-if="dataAll.user_paiming<0">
						<image src="../../static/imags/home/down.png" mode=""></image>
					</view>
					<view class="upordown" v-if="dataAll.user_paiming>=0">
						<image src="../../static/imags/home/up.png" mode=""></image>
					</view>
					<view>{{dataAll.user_paiming}}名</view>
				</view>
			</view>
		</view>
		<view class="mainpadding2">
			<view class="mainpadding ffffff radius">
				<view class="flexbetween all-message">
					<text>员工（{{dataAll.biao.user.length}}人）</text>
					<text>总计：{{dataAll.allyeji}}</text>
				</view>
				<view class="flexbetween all-message margin_top">
					<text>姓名</text>
					<text>销售净额</text>
				</view>
				<view class="flexbetween all-message margin_top" v-for="(item,index) in dataAll.biao.user" :key="item.id">
					<text>{{index+1}}.{{item.name}}</text>
					<text>{{item.yeji}}元</text>
				</view>
			</view>
		</view>
		<!-- 时间选择器 -->
		<u-datetime-picker :show="timeshow" title="选择时间" v-model="value1" @confirm="timeconfirm" @cancel="timeshow = false" mode="date"></u-datetime-picker>
		<!-- 类型 -->
		<u-picker :show="showlx" title="选择类型" keyName="name" :columns="lxcolumns" @confirm="lxconfirm"
			@cancel="showlx=false"></u-picker>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				timevalue:"筛选时间",
				timeshow: false,
				value1:new Date(),
				// 团队
				showlx: false,
				lxcolumns: [
					[{
							name: "团队",
							id: 1
						},
						{
							name: "个人",
							id: 2
						}
					]
				],
				lx: {
					name: "个人",
					id: "2",
				},
				chartData: {},
				chartDatatwo: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['column'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					dataLabel: false,
					color: ["#3476fe", "#99C1FF", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [20, 15, 15, 5],
					legend: { //图例配置
						show: false, //是否显示图例配置
						fontColor: "#fff", //字体颜色
						position: "top",
						float: "right",
					},
					xAxis: { //x轴
						disableGrid: true,
						fontColor: "#333",//文字颜色
						rotateLabel:true//文字旋转
					},
					yAxis: { //y轴
						disableGrid: false,//true不显示横线线，false显示横线
						gridType:"dash",//横线类型
						dashLength:16,//当为虚线时虚线的长度
						data: [{
							min: 0,//起始值
							fontColor: "#999"
						}],
					},
					extra: {
						column: {
							type: "group",
							width: 10,
							activeBgColor: "#fff",
							activeBgOpacity: 0.08,
							barBorderCircle: true, //顶部是否为圆角
						}
					}
				},
				dataAll:{
					allyeji:"",
					mypaiming:"",
					tuandui_paiming:"",
					uid:"",
					user_paiming:"",
					year_paiming:"",
					team_all: 0, //团队总收入
					team_year: 0, //团队年收入
					team_month: 0, //团队月收入
					user_all: 0, //团队月收入
					user_year: 0, //团队月收入
					user_month: 0, //团队月收入
					biao:{
						user:[
							{
								id: 0,
								jinnian: 0,
								jinri: 0,
								name: "",
								qunian: 0,
								yeji: 0,
								zuori: 0,
							}
						]
					}
				}
			}
		},
		onLoad() {
			this.init()
		},
		methods: {
			init() {
				let _this = this;
				httpRequest.request('appapi/staff/user/qianbao', 'POST', {
					type:this.lx.id,
					timevalue:this.timevalue=="筛选时间"?"":this.timevalue
				}, false, false, true).then(res => {
					let data = {
						categories: [],
						series: [{
								name: "昨日",
								data: []
							},
							{
								name: "今日",
								data: []
							}
						]
					};
					let data1 = {
						categories: [],
						series: [{
								name: "去年",
								data: []
							},
							{
								name: "今年",
								data: []
							}
						]
					};
					res.data.biao.user.forEach(item=>{
						data.categories.push(item.name)
						data1.categories.push(item.name)
					})
					res.data.biao.team_shouru.forEach(item=>{
						data.series[0].data.push(item.zuori)
						data.series[1].data.push(item.jinri)
					})
					res.data.biao.year_shouru.forEach(item=>{
						data1.series[0].data.push(item.zuori)
						data1.series[1].data.push(item.jinri)
					})
					this.chartData = JSON.parse(JSON.stringify(data));
					this.chartDatatwo = JSON.parse(JSON.stringify(data1));
					this.dataAll = res.data
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			// 时间选择点击确定
			timeconfirm(e) {
				this.timeshow = false
				this.timevalue = this.date(e.value)
				this.init()
				// console.log(e)
			},
			// 日期转换
			date(timer) {
				var date = new Date(timer); //当前时间
				var year = date.getFullYear() //返回指定日期的年份
				var month = repair(date.getMonth() + 1); //月
				var day = repair(date.getDate()); //日
				var curTime = year + "-" + month + "-" + day
				function repair(i) {
					if (i >= 0 && i <= 9) {
						return "0" + i;
					} else {
						return i;
					}
				}
				return curTime
			},
			lxconfirm(e) {
				this.showlx = false
				this.lx.name = e.value[0].name
				this.lx.id = e.value[0].id
				this.init()
			},
		}
	}
</script>

<style lang="scss" scoped>
	/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
	.charts-box {
		width: 100%;
		height: 400rpx;
	}
	// 表格开始
	.chart1_top{
		padding: 30rpx 15rpx 0rpx 15rpx;
		flex-wrap: wrap;
	}
	.margin_rightten{
		margin-right: 10rpx;
	}
	.margin_rightfive{
		margin-right: 10rpx;
	}
	.charttitle{
		font-size: 30rpx;
		font-family: PingFang SC;
	}
	.colorbox1{
		width: 39rpx;
		height: 22rpx;
		background-color: #3476fe;
	}
	.colorbox2{
		width: 39rpx;
		height: 22rpx;
		background-color: #99C1FF;
	}
	.charttuli{
		font-size: 24rpx;
	}
	.upordown{
		width: 34rpx;
		height: 37rpx;
		margin: 0 10rpx;
		image{
			width: 100%;
			height: 100%;
		}
	}
	// 图标底部
	.chart1_bottom{
		background-color: #3476fe;
		border-bottom-right-radius: 20rpx;
		border-bottom-left-radius: 20rpx;
		padding: 30rpx 46rpx 30rpx 46rpx;
		color: #fff;
	}
	.itembox{
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
	}
	.itembox_bottom{
		font-size: 24rpx;
		font-weight: 800;
	}
	.bigtext{
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 800;
	}
	// 底部内容
	// 内容
	.all-message{
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
	}
</style>
